<?php defined('SYSPATH') OR die('No direct access allowed.'); ?>
<div class="box">
    <div id="examplediv" href="http://localhost/test/users/listusers">
	    <div id="examplecontent" class="roundedContent">
		    <p>Rounded Div!  Click on me to get user list.</p>
	    </div>
    
		<script type="text/javascript">
		//	window.addEvent('domready', function() {
				/* ajax alert */
				$('examplediv').addEvent('click', function(event) {
					//prevent the page from changing
					event.stop();
					//make the ajax call
					var req = new Request({
						method: 'get',
						url: $('examplediv').get('href'),
						data: { 'do' : '1' },
						onRequest: function() { alert('Request made. Please wait...'); },
						onComplete: function(response) { 
							alert('Got Response: ' + response);
							var data = JSON.decode(response);
							
							var table = document.createElement('table');
							var tbody = document.createElement('tbody');
							 
							$each(data, function(value, key) {
								var tr = document.createElement('tr');
								var th = document.createElement('th');
								var td = document.createElement('td');
								th.innerHTML = key;
								td.innerHTML = value;
								tr.appendChild(th);
								tr.appendChild(td);
								tbody.appendChild(tr);
							});
							
							table.appendChild(tbody);
							$('userinfo').appendChild(table);
						}
					}).send();
				});
		//	};
	    </script>
    </div>

  <p id=userinfo> User Table: </p> <br>
  </p>
</div>